<template>
  <span 
    class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full"
    :class="badgeClasses"
  >
    <span class="mr-1">{{ roleIcon }}</span>
    {{ roleText }}
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  role: 'creator' | 'admin' | 'member';
  size?: 'sm' | 'md';
}

const props = withDefaults(defineProps<Props>(), {
  size: 'sm'
});

const roleIcon = computed(() => {
  switch (props.role) {
    case 'creator':
      return '👑';
    case 'admin':
      return '🛡️';
    case 'member':
    default:
      return '👤';
  }
});

const roleText = computed(() => {
  switch (props.role) {
    case 'creator':
      return '群主';
    case 'admin':
      return '管理员';
    case 'member':
    default:
      return '成员';
  }
});

const badgeClasses = computed(() => {
  const baseClasses = props.size === 'md' ? 'px-3 py-1.5 text-sm' : 'px-2 py-1 text-xs';
  
  switch (props.role) {
    case 'creator':
      return `${baseClasses} bg-yellow-100 text-yellow-800 border border-yellow-200`;
    case 'admin':
      return `${baseClasses} bg-blue-100 text-blue-800 border border-blue-200`;
    case 'member':
    default:
      return `${baseClasses} bg-gray-100 text-gray-600 border border-gray-200`;
  }
});
</script> 